<template>
    <div class="container flex-container">
        <n-h1>标签</n-h1>
        <n-text depth="3" style="font-size: 18px;">标签不仅能组织和归类你的内容，还能关联相似的内容。正确的使用标签将让你的内容被更多人发现和解决。</n-text>
        <div class="action">
            <n-input v-model:value="keyword" :clearable="true" placeholder="搜索标签" size="large" style="width: 24%;"
                     @keyup.enter="handleSearchTags">
                <template #prefix>
                    <n-icon :component="Searchengin"/>
                </template>
            </n-input>
            <n-button size="large" type="primary" @click="showModal = true">添加标签</n-button>
        </div>
        <div class="tag-wrapper">
            <Tag v-for="tag in tagList" :key="tag.id" :tag="tag" @update-tags="fetchTagList"/>
        </div>
        <n-modal v-model:show="showModal" :bordered="false" preset="card" size="huge" style="width: 600px"
                 title="新增一个标签">
            <n-form
                ref="formRef"
                :model="tag"
                :rules="rules"
                :style="{maxWidth: '640px'}"
                label-placement="left"
                label-width="auto"
                require-mark-placement="right-hanging"
            >
                <n-form-item label="标签名" path="name">
                    <n-input v-model:value="tag.name" placeholder="请输入名称"/>
                </n-form-item>
                <n-form-item label="描述" path="description">
                    <n-input
                        v-model:value="tag.description"
                        :autosize="{ minRows: 3, maxRows: 5 }"
                        placeholder="描述一下标签"
                        type="textarea"
                    />
                </n-form-item>
            </n-form>
            <template #footer>
                <n-button size="large" type="primary" @click="handleInsert">提交</n-button>
            </template>
        </n-modal>
    </div>
</template>

<style scoped>
.flex-container {
    padding-left: 1vw;
}

.container:deep(.n-h) {
    margin: 0;
}

.tag-wrapper {
    margin-top: 2vh;
    display: flex;
    gap: 1vw;
    flex-flow: row wrap;
    align-content: flex-start;
}

.action {
    margin-top: 2vh;
    display: flex;
    justify-content: space-between;
}
</style>

<script setup>
import Tag from '../components/Tag.vue'
import { Searchengin } from '@vicons/fa'
import { onMounted, ref } from 'vue'
import { insertTag, listTags, searchTags } from '../api/tag'
import { useLoadingBar, useMessage } from 'naive-ui'
import { useUserStore } from '../store/user'

const tagList = ref([])
const message = useMessage()
window.$message = useMessage()
const showModal = ref(false)
const loadingBar = useLoadingBar()
onMounted(() => {
        fetchTagList()
    },
)
const fetchTagList = () => {
    loadingBar.start()
    listTags().then(res => {
        tagList.value = res.data
        loadingBar.finish()
    })
}

const tag = ref({
    name: '',
    description: '',
})
const keyword = ref('')
const rules = {
    name: {
        required: true,
        message: '标签名不能为空',
        trigger: 'blur',
    },
}
const userStore = useUserStore()
const handleInsert = () => {
    if (userStore.token) {
        insertTag(tag.value).then(res => {
            if (res.code === '201') {
                fetchTagList()
                showModal.value = false
            } else {
                message.error(res.msg)
            }
        })
    } else {
        message.warning('请先登录！')
    }
}

const handleSearchTags = () => {
    searchTags(keyword.value).then(res => {
        tagList.value = res.data
    })
}
</script>
